<template>
    <div  class=" articledetail wrap_common">
        <div class="update_com_wrap" :class="{'poster_wrap': myData.type == 3}">
            <!-- div class="update_wrap_left">
                <img :src="userInfo.user_picture" alt/>
            </!-->
            <div class="update_wrap_right" @click="jumpDet">
                <!-- div class="update_com_title">
                    <div class="update_com_title_text">获客{{ myData.type | getTypeName }}</div>
                    <!-- <div>{{ myData.create_time }}</div> -->
                <div v-if="myData.type == 3" class="update_con_title ellipsis_two_line_com">{{ myData.content.title }}</div>
                <div class="update_con_img" :class="{'box_shadow_body': myData.type == 3}">
                    <img :src="`${myData.content.file_url}?x-oss-process=image/resize,m_fill,h_480,w_1065`" class="aiticle_img" />
                    <div class="signs" v-if="myData.type == 1 || myData.type == 2">{{ myData.content.cate_name }}</div>
                </div>
                <div v-if="myData.type == 1 || myData.type == 2" class="update_com_content box_shadow_body">
                    <div class="update_con_title ellipsis_two_line_com">
                        <span v-if="myData.type == 1 || myData.type == 2" class="shop_title_tag" :class="[ myData.content.is_public  == 1? 'merchant_tag' : 'self_tag']">{{ myData.content.is_public == 1? '平台' : '' }}</span>
                        <span>{{ myData.content.title || '暂无' }}</span>
                    </div>
                    <div class="update_con_house" v-if="myData.type == 2">{{ myData.content.acreage }}m² | {{ myData.content.room }}房 | {{ myData.content.cate_name }} | {{ myData.content.price }}万</div>
                </div>
                <!-- div class="extension_time">最近推广时间：{{ myData.time }}</！div>-->
            </div>
        </div>
        <div class="visit_list">
            <div class="visit_head">
                <div class="visit_num">
                    获客人数
                    <span>{{ myData.count_user }}</span>
                </div>
                <div class="visit_num">
                    浏览次数
                    <span>{{ myData.browse_number }}</span>
                </div>
                <div class="visit_num">
                    分享次数
                    <span>{{ myData.count }}</span>
                </div>
            </div>
            <ul class="visit_body">
                <li v-for="(item,index) in userList" :key="index">
                    <div class="visit_user">
                        <img :src="item.user_picture" alt />
                    </div>
                    <div class="visit_userdetail">
                        <p>{{ item.user_name }}</p>
                        <P>共浏览{{ item.count_browse }}次</P>
                        <p>最后浏览时间：{{ item.last_time }}</p>
                    </div>
                </li>
            </ul>
        </div>
        <footer>
            <div class="fbtn" @click="shareother()">
                <i class="iconfont iconfenxiang"></i>生成分享海报
            </div>
        </footer>
        <v-sharePoster ref="sharePoster" :type="posterType"></v-sharePoster>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import SharePoster from '@/pages/components/sharePoster'
import { getExpandDet } from '@/api/getGuest'
import { getFormatDate } from '@/utils/common'
export default {
	name: 'ArticleDetail',
	components: {
		'v-sharePoster': SharePoster
	},
	data() {
		return {
			posterType: null,
			myData: {
				content: ''
			},
			userList: []
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(option) {
	    this.option = option
		this.init()
	},
	methods: {
		init() {
			let params = {
				expand_record_id: this.option.det_id
			}
			// console.log
			getExpandDet(params).then(res => {
				if (res.status == 'success') {
					let data = res.data

					if (data.data) {
						let time = data.data.create_time
						data.data.create_time = getFormatDate(time, 'yyyy-MM-dd hh:mm:ss')
						data.data.time = getFormatDate(time, 'MM-dd hh:mm:ss')
					}
					this.myData = data.data

					for (let i = 0; i < data.list.length; i++) {
						data.list[i].last_time = getFormatDate(data.list[i].last_time, 'yyyy-MM-dd hh:mm:ss')
					}
					this.userList = data.list
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 推广获客
		shareother() {
			if (!this.myData.type) {
				this.$toast('暂无海报详情!')
				return false
			}
			this.posterType = this.myData.type == 1 ? 3 : this.myData.type == 2 ? 2 : 10
			let data = {
				id: this.myData.content.id,
				url: true
			}
			this.$nextTick(() => {
				this.$refs.sharePoster.showMask(data, true)
			})
		},
		// 查看详情
		jumpDet() {
			if (this.myData.type == 3) {
				return false
			}
			let path = this.myData.type == 1 ? '/pages/getGuest/articledetail' : '/pages/case/casedetail'
			let iden = this.myData.type == 1 ? 'articleid' : 'caseid'
			let query = {
				owner_user_id: this.userInfo.user_id,
				gobackt: '',
				mainId: 'null'
			}
			query[iden] = this.myData.multi_id

			uni.navigateTo({
				url: `${path}${this.commonJS.queryData(query)}`
			})
		}
	},
	filters: {
		getTypeName(type) {
			let text = ''
			switch (type) {
				case 1:
					text = '文章'
					break
				case 2:
					text = '案例'
					break
				case 3:
					text = '海报'
					break
				default:
					text = '文章'
			}
			return text
		}
	}
}
</script>

<style scoped lang="scss">
.articledetail {
	background-color: #f5f5f5;
	min-height: 100vh;
    // 海报块
    .poster_wrap {
        .update_con_title {
            color: $fontColor2 !important;
            font-size: 28px !important;
            font-weight: 500 !important;
        }
        .update_con_img {
            width: 286px !important;
            min-height: 420px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            height: auto !important;
            margin-bottom: 20px;
        }
    }
    // 最近更新块
    .update_com_wrap {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: flex-start;
        flex: 1;
        border-top: 0.5px solid rgba(238,238,238,1);
        }
        .update_wrap_right {
            // width: calc(100% - 86px);
            .update_com_title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 0 24px;
                color: $fontColor3;
                .update_com_title_text {
                    color: #333;
                    font-weight: 600;
                    font-size: 32px;
                }
            }
            .update_con_img {
                width: 100%;
                height: 320px;
                position: relative;
                .aiticle_img {
                    width: 100%;
                    height: 100%;
                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;
                    object-fit: cover;
                }
                .signs {
                    width: 70px;
                    height: 36px;
                    left: 0;
                    bottom: 0;
                    opacity: 0.6;
                    color: white;
                    text-align: center;
                    line-height: 36px;
                    background: black;
                    position: absolute;
                    border-radius: 0px 18px 0px 0px;
                }
            }
            .update_com_content {
                padding: 20px 20px 1px 20px;
                border-radius: 20px;
                margin-bottom: 30px;
                box-shadow: 0 8px 10px #f1f1f1;
                color: $fontColor3;
                & > div {
                    margin-bottom: 20px;
                }
                .update_con_title {
                    color: #333;
                    font-size: 30px;
                    font-weight: 600;
                    .shop_title_tag {
                        font-size: 28px;
                        font-weight: 400;
                    }
                    .shop_title_tag.self_tag {
                        color: #ff6900;
                        background-color: #fff5ef;
                    }
                    .shop_title_tag.merchant_tag {
                        color: #2965fe;
                        background-color: #f3f3fe;
                    }
                }
            }
            .update_pepple {
                margin-top: 30px;
                .statistics {
                    display: flex;
                    width: 33.33%;
                    // float: left;
                    font-size: 24px;
                    color: #999999;
                    span {
                        color: #333333;
                    }
                }
            }
            .btngroup {
                margin-top: 30px;
                float: right;
                .look_detail {
                    float: right;
                    width: 160px;
                    height: 60px;
                    font-size: 28px;
                    text-align: center;
                    line-height: 60px;
                    border: 2px solid #eeeeee;
                    border-radius: 30px;
                }
            }
            .extension_time {
                color: $fontColor3;
            }
        }
    }
    img {
        width: 100%;
        height: 100%;
    }
    .visit_list {
        background: white;
        .visit_head {
            height: 90px;
            width: 100%;
            line-height: 90px;
            border-bottom: 1px solid #eeeeee;
            .visit_num {
                width: 30%;
                height: 100%;
                text-align: center;
                font-size: 28px;
                font-weight: bold;
                float: left;
                span {
                    color: #ff6900;
                }
            }
        }
        .visit_body {
            width: 100%;
            height: auto;
            li {
                width: 97%;
                height: 170px;
                margin-left: 3%;
                border-bottom: 1px solid #eeeeee;
                padding: 10px 0;
                .visit_user {
                    width: 80px;
                    height: 80px;
                    margin-top: 45px;
                    border-radius: 45px;
                    float: left;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 45px;
                    }
                }
                .visit_userdetail {
                    float: left;
                    margin-top: 45px;
                    margin-left: 20px;
                    font-size: 24px;
                    color: #666666;
                    & > p {
                        margin-bottom: 5px;
                    }
                    p:nth-child(1) {
                        color: #333333;
                        font-size: 32px;
                    }
                    p:last-child {
                        color: #999999;
                    }
                }
            }
        }
    }
    .fbtn {
        height:66px;
        width: 690px;
        border-radius: 345px;
        margin: 60px auto 40px;
        margin-top: 15px;
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 66px;
        background: linear-gradient(90deg, rgba(255, 125, 109, 1), rgba(255, 68, 68, 1));
        .iconfenxiang {
            margin-right: 10px;
        }
    }
</style>
